<template>
    <div class="app">
        <div class="login-b">
            <div class="login-l">
                <div v-if="isenroll === 1" class="login-im">
                    <img src="../static/工作.png" class="login-img" alt="">
                </div>
                <div v-else class="enroll-im">
                    <div style="width: 90%;height: 100%;display: flex;flex-direction: column;justify-content: space-evenly;">
                        <span style="font-size: 25px;color: #000;font-weight: bold;text-align: center;">注册</span>
                        <div><el-input v-model="username" placeholder="请输入用户名" /></div>
                        <div><el-input v-model="password" type="password" placeholder="请输入密码" /></div>
                        <div><el-input v-model="email" placeholder="请输入邮箱" /></div>
                        <div><el-button type="primary" @click="register" style="width: 100%;">注册</el-button></div>
                        <span style="font-size: 13px;color: #000;text-align: right;" class="change" @click="change(1)">已有账号？点我登录</span>
                    </div>
                </div>
            </div>
            <div class="login-r">
                <div class="login-f" v-if="isenroll === 1">
                    <div class="form">
                        <span style="font-size: 25px;color: #000;font-weight: bold;text-align: center;">登  录</span>
                        <div><el-input v-model="username" placeholder="请输入用户名" /></div>
                        <div><el-input v-model="password" type="password" placeholder="请输入密码" /></div>
                        <div><el-button type="primary" @click="login" style="width: 100%;">登录</el-button></div>
                        <span style="font-size: 13px;color: #000;text-align: right;" class="change" @click="change(2)">还没有账号？点我注册</span>
                    </div>
                </div>
                <div v-else style="width: 100%;height: 100%;">
                    <img src="../static/工作1.png" style="width: 100%;height: 100%;" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus';
// 从vue-router导入useRouter，这是获取路由对象的方法  
import { useRouter } from 'vue-router';  

//定义数据
const username = ref('');
const password = ref('');
const email = ref('');
let isenroll = ref(1);

//获取路由对象
const router = useRouter();


//登录函数
function login(){
    //判断用户名和密码是否为空
    if(username.value === '' || password.value === ''){
        ElMessage.error('用户名或密码不能为空');
    }else{
        //发送请求
        axios.post("http://127.0.0.1:8080/login", {
            username: username.value,
            password: password.value,
        },{
            //设置请求头
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'  
            }
        }).then((res) => {
            //判断是否登录成功
            if(res.data.code === 200){
                ElMessage.success('登录成功');
                //将username存入token
                const token = username.value;
                //存入session
                sessionStorage.setItem('token', token);
                
                //跳转到首页
                router.push({name: 'home'});
            }else{
                //提示错误信息
                ElMessage.error(res.data.msg);
            }
        })
    }
}


//注册函数
function register(){
    //判断用户名和密码是否为空
    if(username.value === '' || password.value === '' || email.value === ''){
        //提示错误信息
        ElMessage.error('用户名或密码不能为空');
    }else{
        //发送请求
        axios.post("http://127.0.0.1:8080/register", {
        username: username.value,
        password: password.value,
        e_mail: email.value,
    },{
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'  
        }
    }).then((res) => {
       if(res.data.code === 200){
                //提示成功信息
                ElMessage.success('注册成功');
                //切换状态
                isenroll.value = 1;
        }else{
                ElMessage.error(res.data.msg);
        }
        })
    }
}


//切换状态
function change(value){
    if(value === 1){
        isenroll.value = 1;
    }else{
        isenroll.value = 0;
    }
}
</script>

<style scoped>
    .login-im{
        width: 100%;
        height: 100%;
    }
    .enroll-im{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
    }
    .app{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-image: url(../static/bg.png);
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .login-b{
        width: 50%;
        height: 400px;
        margin: 0 auto;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
    }
    .login-l{
        width: 50%;
        height: 100%;
    }
    .login-r{
        width: 50%;
        height: 100%;
    }
    .login-f{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .form{
        width: 90%;
        height: 90%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }
    .login-img{
        width: 100%;
        height: 100%;
    }
    .change:hover{
        cursor: pointer;
    }
</style>